Vue Js disable past dates in datepicker:To disable past dates in a Vue.js datepicker, utilize the :min attribute along with the new Date() function. By assigning the :min attribute to the current date, the datepicker will only allow dates from today and onward, effectively preventing the selection of past dates. This approach ensures that users cannot choose dates that have already occurred, maintaining data integrity and aligning with the desired functionality of the datepicker.

How can I disable past dates in a datepicker using Vue js?

In the given code, a Vue.js application is created with a date input field (datepicker). The selected date is bound to the selectedDate data property using the v-model directive. To disable past dates in the datepicker, the min attribute is bound to the minDate computed property.

Inside the minDate computed property, the current date is obtained using new Date().toISOString().split("T")[0]. This creates a new Date object representing the current date and converts it to an ISO string format. The resulting string is then split at the “T” character to get only the date part.

By setting the min attribute of the input field to the minDate value, any date prior to or including the current date will be disabled in the datepicker, preventing the user from selecting them.

Vue Js disable past dates in datepicker Example

 <div id="app">
    <input type="date" v-model="selectedDate" :min="minDate" />
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          selectedDate: null
        };
      },
      computed: {
        minDate() {
          const today = new Date().toISOString().split("T")[0];
          return today;
        }
      }
    });
  </script>

Output of Vue Js disable past dates in datepicker